<template>
  <div class="title" @click='handleClick'>
    <h3>{{title}} <a-icon type="right" /></h3>
  </div>
</template>

<script>
export default {
  name: "Title",
  props: ['title'],
  data() {
    return {
      left: this.title === '推荐歌单' ? '1rem' : 0
    }
  },
  methods: {
    handleClick() {
      this.$emit('handleClick', this.title);
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  height: 2rem;
  line-height: 4rem;
  font-size: 2rem;
  font-weight: bolder;
  cursor: pointer;
}
</style>